// web/src/app/(employee)/employee/[id]/_components/employee-navbar.tsx
import React from 'react';
import {Employee} from "@/lib/employee/type";
import {formatPrice} from "@/lib/format";
import {GoLocation} from "react-icons/go";
import {GiTeacher} from "react-icons/gi";

interface Props {
    employee: Employee;
}

const EmployeeNavbar = ({employee}: Props) => {

    return (
        <div className={`z-50 px-24 flex flex-col gap-y-4 justify-center bg-blue-950 h-48 sticky inset-y-0
        top-0`}>
            <div className={`text-white flex justify-between`}>
                <span className={`font-semibold text-3xl`}>
                    {employee.name}
                </span>
                <span className={`ml-auto text-2xl`}>
                    {formatPrice(employee.salary)} / 月
                </span>
            </div>
            <div className={`text-white flex flex-row space-x-2`}>
                <div className={`flex flex-row items-center gap-1`}>
                    <GoLocation className={`size-5`}/>
                    {employee.city.name}
                </div>
                <div className={`flex flex-row items-center gap-1`}>
                    <GiTeacher className={`size-5`}/>
                    {employee.education.name}
                </div>
            </div>
            <div className={`text-white`}>
                <span>{employee.company.name}</span>
            </div>
        </div>
    );
};

export default EmployeeNavbar;